<template>
  <el-menu unique-opened :collapse-transition="false" background-color="#333744" :default-active="active" :collapse="collapse"
    text-color="#fff" router>
    <el-sub-menu v-for="item in menuList" :key="item.id" :index="'/' + item.path">
      <template #title>
        <i :class="iconsObj[item.id]"></i>
        <span>{{ item.authName }}</span>
      </template>
      <el-menu-item v-for="it in item.children" :key="it.id" :index="'/' + it.path" @click="saveNavState('/' + it.path)">
        <template #title>
          <el-icon>
            <Menu />
          </el-icon>
          <span>{{ it.authName }}</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getMenuListApi } from '../api/interface';
import { Menu } from '@element-plus/icons-vue'

const iconsObj = {
  125: 'iconfont icon-user',
  103: 'iconfont icon-tijikongjian',
  101: 'iconfont icon-shangpin',
  102: 'iconfont icon-danju',
  145: 'iconfont icon-baobiao'
}
const menuList = ref([])
const props = defineProps({
  collapse: {
    type: Boolean
  }
})
const active = ref<String|null>('')
active.value = sessionStorage.getItem("current-path")

const getMenuList = async () => {
  const res = await getMenuListApi()
  if (res.meta.status === 200) {
    menuList.value = res.data
  }
}
getMenuList()
const saveNavState = (path:any) => {
  sessionStorage.setItem("current-path", path)
  active.value = path
}
</script>

<style lang="scss" scoped>
.el-menu {
  border: 0;
}

.iconfont {
  margin-right: 10px;
  color: #909399;
}
</style>